import React, { PureComponent } from 'react';
// 引入框架
import { Input, message } from 'antd'
// 发送axios
import Axios from 'axios';
import { webSite } from '../website';
// 引入样式
import './scss/login.scss';
import cookie from 'react-cookies'
// 引入store
import store from '../store/index';
// 引入动作
import { ApiuserId, ApiuserQq } from '../store/actionCreators/ApiCreators';
import { PlusCircleFilled, RightCircleFilled } from '@ant-design/icons';
export default class Login extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 账号框
      username: '',
      // 密码框
      password: ''
    }
    // state的写法
    this.unSubscribe = store.subscribe(() => {
      // 强制更新
      this.forceUpdate()
    })
  }
  // 清除订阅者
  componentWillUnmount () {
    this.unSubscribe()
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 登录按钮
  formBtn = () => {
    // 去掉用户名和密码空格
    let username = this.state.username.replace(/\s+/g, "");
    let password = this.state.password.replace(/\s+/g, "");
    // 判断用户是否未输入
    if (username === '' || password === '') {
      message.error({ content: '账号或密码未输入', className: 'bulletChatMessage' });
      return;
    }
    // 判断用户是否输入汉字
    if (/[\u4E00-\u9FA5]/g.test(username) || /[\u4E00-\u9FA5]/g.test(password)) {
      message.error({ content: '用户名和密码只支持数字字母下划线', className: 'bulletChatMessage' });
      return;
    }
    // 发送登录的请求
    const AxiosLogin = Axios.create({
      baseURL: `${webSite}:3003`
    });

    // 登录的api请求
    const setApiLogin = () => {
      // 把用户的建议和联系方式发送到后台
      return AxiosLogin.post("/login", { username: username, password: password });
    }

    setApiLogin().then(err => {
      if (err.data.code === 'A0002') {
        message.success({ content: err.data.msg, className: 'bulletChatMessage' })
        // 登录之后把值存入store
        store.dispatch(ApiuserId(err.data.data.id));
        store.dispatch(ApiuserQq(err.data.data.qq));
        // 把用户信息存储在cook中
        //设置cookie，第三个参数的意思是所有页面都能用这个cookie
        cookie.save('user', err.data.data.user, { path: "/", maxAge: 300000 })
        cookie.save('userid', err.data.data.userId, { path: "/", maxAge: 300000 })
        this.props.history.replace('/')
        return;
      }
      message.error({ content: err.data.msg, className: 'bulletChatMessage' });
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }
  // 注册按钮
  RegBtn = () => {
    // 跳转到播放页
    this.props.history.replace('/RegBtn')
  }
  forget = () => {
    // 跳转到找回密码
    this.props.history.replace('/forget')
  }
  render () {
    return (
      <div className='login'>
        {/* 顶部logo */}
        <div className='login_logo'>
          <img src={require('./img/logo.jpg')} alt="登录的logo" />
          <div>
            <h2>登录</h2>
            <p>鱼跃此海时</p>
          </div>
        </div>
        {/* 中间的输入框 */}
        <form οnsubmit="return false;" className='input_login'>
          <Input placeholder="账号" className='username_login' value={this.state.username} name='username' onChange={this.handleInput} autoComplete="off" maxLength='20' />

          <Input.Password
            className='username_login'
            onChange={this.handleInput}
            autoComplete="off"
            placeholder="密码"
            value={this.state.password}
            name='password'
            maxLength='30'
          />
        </form>
        {/* 登录按钮 */}
        <div className='go_div'>
          <RightCircleFilled onClick={this.formBtn} className='login_Go' />
          <PlusCircleFilled onClick={this.RegBtn} className='login_Go_reg' />
        </div>
        {/* 找回密码 */}
        <div className='forget'>
          <span onClick={this.forget}>找回密码</span>
        </div>
      </div>
    )
  }
}